<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>小狗跑步</title>
	<script type="text/javascript">
		window.onload= function(){
			btn = document.getElementById('btn');
			dog = document.getElementById('dog');
			cat = document.getElementById('cat');
			var left=0,top=20;
			var leftFlag=true,topFlag=true;
			var right=0,rTop=20;
			var rightFlag=true,rTopFlag=true;

		// 	var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;


		// var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
			// alert(parseInt(window.screen.availHeight));
			btn.onclick=function(){
				if (btn.value=="start") {
					btn.value="stop";
					time = setInterval(run,10);
				}else{
					btn.value="start";
					clearInterval(time);
				}
				
				

				function run(){
					var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
					var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
					// console.log(w);
					if(left>=parseInt(w)-100){
						leftFlag=false;

					}else if(left<0){
						leftFlag=true;
					}
					if (top>=parseInt(h)-100) {
						topFlag=false;
					}else if(top<20){
						topFlag=true;
					}

					if(leftFlag&&topFlag){
						left=left+10;dog.style.left=left+"px";
					}else if(!leftFlag&&topFlag){
						top=top+10;dog.style.top=top+"px";
					}else if(!leftFlag&&!topFlag){
						left=left-10;dog.style.left=left+"px";
					}else if(leftFlag&&!topFlag){
						top=top-10;dog.style.top=top+"px";
					}


					if(right>=parseInt(w)-100){
						rightFlag=false;

					}else if(right<10){
						rightFlag=true;
					}
					if (rTop>=parseInt(h)-100) {
						rTopFlag=false;
					}else if(rTop<20){
						rTopFlag=true;
					}

					if(rightFlag&&rTopFlag){
						right=right+10;cat.style.right=right+"px";
					}else if(!rightFlag&&rTopFlag){
						rTop+=10;cat.style.top=rTop+"px";
					}else if(!rightFlag&&!rTopFlag){
						right=right-10;cat.style.right=right+"px";
					}else if(rightFlag&&!rTopFlag){
						rTop-=10;cat.style.top=rTop+"px";
					}					
				}
			}

		}
	</script>
	<style type="text/css">
		#dog{
			width: 100px;
			height: 100px;
			background-color:black;
			float: left;
			position: absolute;
			top:20px;
			left: 0px;
			/*display: none;*/
		}
		#cat{
			width: 100px;
			height: 100px;
			background-color: blue;
			float: right;
			position: absolute;
			top: 20px;
			right: 0px;
			/*display: none;*/
		}
		#btn{
			width: 50px;
			height: 50px;
			border-radius: 50%;
			border: 0px;
			background-color: red;
			color: white;
			position: absolute;
			left: 50%;
			top: 50%;
			margin-left: -25px;
			margin-top: 25px;
		}
	</style>
</head>
<body>
	<div id="dog" ></div>
	<div id="cat"></div>
	<input type="button" id="btn" value="start">
</body>
</html>